{% extends "communityBase.html" %}

{% block tochange %}

    <script src="../../static/js/echarts.min.js"></script>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h2 class="page-header">今日热门板块</h2>

        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 500px;height:400px;display: inline-block;"></div>
        <div style="width: 50px;display: inline-block"></div>
        <div id="main1" style="width: 400px;height:400px;display: inline-block;"></div>
        <div id="main2" style="width: 800px;height:600px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '各板块今日访问量'
                },
                tooltip: {},
                legend: {
                    data: ['访问量']
                },
                xAxis: {
                    data: ["外科", "妇产科", "眼科", "耳鼻喉科", "口腔科"]
                },
                yAxis: {},
                series: [{
                    name: '访问量',
                    type: 'bar',
                    data: [30, 20, 36, 10, 10, 20]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            //饼状图
            var myChart1 = echarts.init(document.getElementById('main1'));
            option1 = {
                title: {
                    text: '各科发帖数占比',
                    subtext: '可看各科活跃程度',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['外科', '妇产科', '眼科', '耳鼻喉科', '口腔科']
                },
                series: [
                    {
                        name: '发帖占比',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            {value: 335, name: '外科'},
                            {value: 310, name: '妇产科'},
                            {value: 234, name: '眼科'},
                            {value: 135, name: '耳鼻喉科'},
                            {value: 1548, name: '口腔科'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart1.setOption(option1);

        </script>

    </div>

{% endblock %}
